<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标悬停过渡效果</title>
    <style type="text/css">
    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    
    ul.pagination li {
        display: inline;
    }
    
    ul.pagination li a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
    }
    
    ul.pagination li a.active {
        background-color: #4CAF50;
        color: white;
    }
    
    ul.pagination li a:hover:not(.active) {
        background-color: #ddd;
    }
    </style>
</head>

<body>
    <h2>鼠标悬停过渡效果</h2>
    <p>鼠标移动到分页码上。</p>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

</html>
